import React, { PureComponent } from 'react'
import { View, StyleSheet } from 'react-native'
import PropTypes from 'prop-types'
import Swiper from 'react-native-swiper'
import { ScaleT, ScaleS } from 'src/utils/ScreenUtil'
import CustomButton from 'src/components/button/CustomButton'
import CustomImage from 'src/components/image/CustomImage'
import { WIDTH, IS_IOS } from '../../utils/ScreenUtil'

export default class HomeBanner extends PureComponent {
  static propTypes = {
    swipers: PropTypes.array,
    swiperClick: PropTypes.func
  }

  static defaultProps = {
    swipers: []
  }

  render () {
    const { swipers } = this.props
    return (
      <View style={styles.container}>
        {swipers && swipers.length > 0 &&
        <Swiper
          removeClippedSubviews={!IS_IOS}
          style={styles.wrapper}
          autoplay
          loop
          autoplayTimeout={5}
          dot={<View style={styles.dot}/>}
          activeDot={<View style={[styles.dot, styles.activeDot]}/>}
          paginationStyle={styles.paginationStyle}>
          {swipers.map(this.renderItem)}
        </Swiper>}
      </View>
    )
  }

  renderItem = (item, index) => {
    return (
      <CustomButton
        key={index} style={styles.slide} params={{ item, index }} onPress={this.props.swiperClick}
        activeOpacity={1}>
        {/* <CustomImage style={styles.img} source={{uri: item.img}}/> */}
        <CustomImage style={styles.img} source={item.source}/>
      </CustomButton>
    )
  }
}
const imgW = WIDTH - ScaleS(40)
const imgH = imgW * 150 / 335
const swapH = imgH + 26
const styles = StyleSheet.create({
  container: {
    marginTop: ScaleS(15),
    height: swapH
  },
  slide: {
    marginHorizontal: ScaleS(20),
    width: imgW,
    height: imgH
  },
  img: {
    width: imgW,
    height: imgH,
    resizeMode: 'cover',
    borderRadius: ScaleS(10)
  },
  dot: {
    width: ScaleS(6),
    height: ScaleS(6),
    borderRadius: ScaleS(3),
    backgroundColor: '#676767',
    marginHorizontal: ScaleS(3),
    opacity: 0.29
  },
  activeDot: {
    width: ScaleS(12),
    height: ScaleS(6),
    backgroundColor: '#444444',
    opacity: 1
  },
  paginationStyle: {
    bottom: 0
  }
})
